<template>
  <el-card>
    <el-tabs v-model="activeName">
      <el-tab-pane label="试卷复查评价" name="basic">
          <el-form  ref="form" :data="columns" label-width="100px" style="overflow-y:scroll; overflow-x:hidden; height:700px;">
            <div class="item" v-for="(item, index) in columns" :key="index">
              <el-form-item style="margin-right: 100px;">
                <el-card class="box-card" shadow="hover">
                  <div slot="header" class="clearfix">
                    <span>{{index+1 + ". (" + typeMap[item.selectType] + ")"}}: </span>
                    <span v-text="item.content"></span>
                  </div>

                  <div>
                    <span v-text="item.options"></span>
                    <!-- 单选 -->
                    <div v-if="item.selectType==='radio'"  style="display:flex">
                      <div v-for="(elem, i) in selectResult[item.selectNum]" :key="i" style="width: 60px">
                        <el-radio :label="elem" v-model="item.mySituation"></el-radio>
                      </div>
                    </div>
                    <!-- 填空 -->
                    <div v-else-if="item.selectType==='input'">
                      <el-input 
                        v-model="item.mySituation"
                        style="width: 70px"
                        oninput ="value=value.replace(/[^0-9.]/g,'');if(value>100)value=100"
                        :maxlength="3" />
                    </div>
                  </div>
                </el-card>
              </el-form-item>
            </div>
          </el-form>
      </el-tab-pane>
    </el-tabs>

    <el-form label-width="100px">
      <el-form-item
        style="text-align: center; margin-left: -100px; margin-top: 10px"
      >
        <el-button type="warning" plain @click="tipsModal = true">注意事项</el-button>
        <el-button type="primary" @click="submitForm()">提交</el-button>
        <el-button @click="close()">返回</el-button>
      </el-form-item>
    </el-form>

    <!-- 注意事项提示模态框 -->
    <el-dialog
      title="注意事项"
      :visible.sync="tipsModal"
      width="30%"
      center>
      <h3>注：关于15和16项的说明：</h3>
      <span>1、学生平时成绩有随意分：（1）仅有平时总成绩，但无平时成绩详细记载或来源说明；（2）不同学生的平时成绩没有区别；（3）大部分学生的平时成绩、卷面成绩与综合成绩无区别。</span><br/>
      <span>2、课程考核分析完善：（1）学生掌握基本理论、基本知识的情况；（2）学生掌握基本技能及综合应用知识的情况；（3）理解、分析、解决问题的能力；（4）课程教学实施过程各环节存在的问题分析。</span><br/>
      <h3>关于提交：</h3>
      <span>1、每份本科试卷复查评价仅能评价一次，提交后将无法修改！</span><br/>
      <span>2、请评价完所有项目再提交。</span><br/>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="tipsModal = false">我知道了</el-button>
      </span>
    </el-dialog>
  </el-card>
</template>

<script>
import { listTestReviewItems, addTestReviewEval } from "@/api/course/testReviewItems";

export default {
  name: "ToTestReviewEval",
  data() {
    return {
      // 遮罩层
      loading: true,
      // 评价项表格数据
      columns: [],
      // 选中选项卡的 name
      activeName: "basic",
      // 表格的高度
      tableHeight: document.documentElement.scrollHeight - 245 + "px",
      typeMap: {
        radio: '单选',
        input: '填空'
      },
      selectResult: {
        0: '',
        1: ['A'],
        2: ['A','B'],
        3: ['A','B','C'],
        4: ['A','B','C','D'],
        5: ['A','B','C','D','E']
      },
      // 注意事项提示模态框
      tipsModal: false
    };
  },
  created() {
    const testReviewId = this.$route.query && this.$route.query.testReviewId;
    if (testReviewId) {
      this.getList(testReviewId);
    }
  },
  methods: {
    getList(testReviewId) {
      this.loading = true;
      listTestReviewItems().then((response) => {
        // console.log(response.rows);
        this.columns = response.rows;
        for (let i = 0; i < this.columns.length; i++) {
          this.columns[i].testReviewId = testReviewId;
        }
        this.loading = false;
        this.tipsModal = true;
      });
    },

    /** 提交按钮 */
    submitForm() {
      // console.log(this.columns);
      const upForm = this.columns
      this.$modal
        .confirm('注意：试卷复查评价仅能提交一次，若确定提交将无法对评价结果进行修改！')
        .then(function () {
          return addTestReviewEval(upForm);
        })
        .then(() => {
          const obj = { path: "/outsideClass/testReview" };
          this.$tab.closeAllPage().then(() => {
            this.$tab.openPage("本科试卷复查", "/outsideClass/testReview");
          })
          this.$modal.msgSuccess("评价成功");
        })
        .catch((error) => {
          if (error.message == "操作失败") {
            this.$modal.alertError("请检查是否所有项目已评价再提交！");
          }
        });
    },
    /** 返回本科试卷复查按钮 */
    close() {
      const obj = { path: "/outsideClass/testReview" };
      this.$tab.closeOpenPage(obj);
    },
  },
};
</script>

